<template>
  <div class="app-page">
    <aside-tree
      title="组织机构"
      :tree-data="treeData"
      :loading="$loadingPlugin.getTreeData"
      @currentChange="currentChange"
      @refresh="getTreeData"
    />
    <div class="content">
      <p>当前选择机构名称: {{ currentOrg ? currentOrg.orgName : '' }}</p>
      <p>当前选择机构orgSNNo: {{ currentOrg ? currentOrg.orgSNNo : '' }}</p>
    </div>
  </div>
</template>

<script>
  import { organizationQueryList } from '@/api'
  import getTreeData from '@/utils/jsonTree'
  import AsideTree from '../components/OrgTree'

  export default {
    name: 'report',
    components: {
      AsideTree
    },
    data() {
      return {
        treeData: [],
        currentOrg: null
      }
    },
    created() {
      this.getTreeData()
    },
    methods: {
      // 获取组织机构数据
      async getTreeData() {
        const res = await organizationQueryList({})
        const data = res.data.map(item => ({
          label: item.orgName,
          ...item
        }))
        this.treeData = getTreeData(data)
      },
      // 选择组织机构变化
      currentChange(current) {
        this.currentOrg = current
      }
    }
  }
</script>

<style lang="scss" scoped>
.app-page {
  display: flex;
  padding: 0;
  .content {
    flex: 1;
    width: 0;
    padding: 0 10px 0 10px;
  }
}
</style>
